<template>
  <f7-popup right class="demo-popup" :opened="popupIsOpened"
            @popup:open="handlerPopupOpen"
            @popup:closed="handlerPopupClosed">
    <f7-page>
      <f7-navbar :title="popupTitle">
        <f7-nav-right>
          <f7-link popup-close>关闭</f7-link>
        </f7-nav-right>
      </f7-navbar>
      <f7-list no-hairlines-md>
        <slot name="popupSlot" :formModel="formModel" :isEdit="isEdit">
          <ul>
            <picker-input v-for="(item,idx) in inputFields"
                          v-if="formModel && item.prop"
                          v-model="formModel[item.prop]"
                          :key="idx"
                          :label="item.label"
                          :type="item.type"
                          :placeholder="item.placeholder"
                          :isEdit="isEdit"
                          :input-id="item.prop"/>
          </ul>
        </slot>
      </f7-list>
      <f7-block v-if="isEdit">
        <f7-row>
          <f7-col>
            <f7-button large raised fill color="gray" @click="handlerClickBtnCancel">取消</f7-button>
          </f7-col>
          <f7-col>
            <f7-button large raised fill @click="handlerClickBtnSubmit">提交</f7-button>
          </f7-col>
        </f7-row>
      </f7-block>
      <f7-block v-else>
        <f7-row>
          <f7-col>
            <f7-button large raised fill @click="handlerClickBtnCancel">关闭</f7-button>
          </f7-col>
        </f7-row>
      </f7-block>
    </f7-page>
  </f7-popup>
</template>

<script type="text/ecmascript-6">
  import PickerInput from './listPickerInput'

  export default {
    props: {
      targetURL: {
        type: String
      },
      inputFields: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        popupIsOpened: false,
        isEdit: false,
        popupTitle: '',
        formModel: null
      }
    },
    methods: {
      open(_title = '', row, _isEdit = false) {
        this.popupTitle = _title
        this.isEdit = _isEdit
        this.formModel = row
        this.popupIsOpened = true
      },
      handlerPopupOpen() {
      },
      handlerPopupClosed() {
        this.popupIsOpened = false
        this.$emit('popupIsOpened', {})
      },
      handlerClickBtnCancel() {
        this.handlerPopupClosed()
      },
      handlerClickBtnSubmit() {
        console.log('formModel', this.formModel)
      }
    },
    components: {
      PickerInput
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
</style>
